<!-- head - 开始 -->
<? require(dirname(dirname(__FILE__)).'/public/head.html'); ?>
<!-- head - 结束 -->

</head>
<? require(dirname(dirname(__FILE__)).'/public/body.html'); ?>
    <div class="wrapper" id="manage-links-sort">
        
        <!-- 侧边栏 - 开始 -->
        <i-left-side></i-left-side>
        <!-- 侧边栏 - 结束 -->
        
        <div class="content-page">
            
            <div class="content">
                
                <!-- 顶部导航 - 开始 -->
                <i-top-nav></i-top-nav>
                <!-- 顶部导航 - 结束 -->
                
                <!-- 内容 - 开始 -->
                <div class="container-fluid">
                
                    <!-- 页面标题 开始 -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <form class="form-inline">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input type="text" class="form-control form-control-light" id="dash-daterange">
                                                <div class="input-group-append">
                                                    <span class="input-group-text bg-primary border-primary text-white">
                                                        <i class="mdi mdi-calendar-range font-13"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <a v-on:click="initData('','',true)" href="javascript:;" class="btn btn-primary ml-2">
                                            <i class="mdi mdi-autorenew"></i>
                                        </a>
                                    </form>
                                </div>
                                <h4 class="page-title">友链分组</h4>
                            </div>
                        </div>
                    </div>
                    <!-- 页面标题 结束 -->
                
                    <div class="row">
                        <div class="col-xl-8">
                            <div class="card">
                                <div class="card-body">
                
                                    <h4 class="header-title">全部分类</h4>
                                    <p class="text-muted font-14 mb-4">
                                        目前只有一级分类，后面会增加二级分类
                                    </p>
                                    
                                    <!-- 加载动画 开始 -->
                                    <div v-if="is_load" class="table-responsive is_load mb-2">
                                        <div class="spinner-border text-primary m-1" role="status"></div>
                                        <div>加载中...</div>
                                    </div>
                                    <!-- 加载动画 结束 -->
                                    
                                    <div v-else-if="!is_load" class="table-responsive-sm">
                                        <table class="table table-centered mb-0">
                                            <thead>
                                            <tr>
                                                <th>名称</th>
                                                <th>描述</th>
                                                <th>数量</th>
                                                <th>显示</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="data in links_sort.sort.data" :key="data.id">
                                                    <td><span v-on:click="initData(data.id)" :class="'cursor badge badge-' + data.expand.color" data-toggle="tooltip" data-original-title="'缩略名：' + data.slug" >{{data.name}}</span></td>
                                                    <td>{{data.description}}</td>
                                                    <td><span class="badge badge-primary" data-toggle="tooltip" data-original-title="友链数量">{{data.expand.count}}</span></td>
                                                    <td>
                                                        <div>
                                                            <input v-on:click="isShow(data.id)" :id="'switch-' + data.id" v-model="is_show" :value="data.id" type="checkbox" data-switch="success"/>
                                                            <label :for="'switch-' + data.id" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a v-on:click="initData(data.id)" class="btn btn-outline-info btn-sm mr-1">
                                                            <svg t="1603942550558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3087" width="14" height="14">
                                                                <path d="M906.116912 36.819799l6.357068 5.84509 66.685222 65.789259a134.778384 134.778384 0 0 1 6.826382 185.592267l-6.101079 6.399733L299.038207 998.187742a85.329778 85.329778 0 0 1-53.459106 25.385609L237.984751 1023.957335H43.304862a42.664889 42.664889 0 0 1-42.366234-37.545102l-0.298655-4.991792-0.554643-178.168576a85.329778 85.329778 0 0 1 19.711178-54.781718l5.034457-5.546435L719.202033 42.664889a138.063581 138.063581 0 0 1 186.914879-5.84509zM981.292446 938.627557a42.664889 42.664889 0 0 1 0 85.329778h-511.978667a42.664889 42.664889 0 1 1 0-85.329778h511.978667zM86.3964 786.783217l-4.735803 4.735803L84.433815 938.627557h153.508271l0.08533-0.213324-151.631016-151.631016zM676.32382 204.791467L147.151202 726.796383l150.521728 150.521729L818.440565 343.665681 676.32382 204.791467zM981.249781 767.968001a42.664889 42.664889 0 0 1 0 85.329778h-255.989334a42.664889 42.664889 0 1 1 0-85.329778h255.989334zM783.626016 99.494521l-4.607808 4.0105-41.939586 41.342277 140.922128 137.764926 41.512937-42.494229c6.783717-6.613058 11.43419-15.018041 13.567435-24.148327l0.938627-5.546436 0.341319-5.631765c0-11.391525-3.92517-22.399067-11.092871-31.230699l-3.882505-4.266489-66.727886-65.789258-4.181159-3.669181a52.733803 52.733803 0 0 0-64.850631-0.341319z" fill="#008df0" p-id="3088">
                                                                </path>
                                                            </svg>
                                                        </a>
                                                        <a v-on:click="btnDelete(data.id)" type="button" class="btn btn-outline-danger btn-sm inis-delete">
                                                            <svg t="1603942959679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5903" width="14" height="14">
                                                                <path d="M973.312 187.904h-172.544V121.856c0-60.928-49.664-111.104-110.592-111.616H334.336c-61.44 0-111.616 50.176-111.616 111.616v66.048H50.688c-22.528 0-40.448 18.432-40.448 40.448 0 22.528 18.432 40.448 40.448 40.448H972.8c22.528 0 40.448-18.432 40.448-40.448 0.512-22.528-17.92-40.448-39.936-40.448zM304.128 121.856c0-16.896 13.824-30.208 30.208-30.208h355.328c16.384 0 29.696 13.312 29.696 29.696v66.56H304.128V121.856zM831.488 330.752c-22.528 0-40.448 18.432-40.448 40.448v531.456c0 16.896-13.824 30.208-30.208 30.208h-496.64c-16.896 0-30.208-13.824-30.208-30.208v-532.48c0-22.528-18.432-40.448-40.448-40.448-22.528 0-40.448 18.432-40.448 40.448v531.968c0 61.44 50.176 111.616 111.616 111.616h496.64c61.44 0 111.616-50.176 111.616-111.616V371.2c-1.024-22.528-19.456-40.448-41.472-40.448z" fill="#d81e06" p-id="5904" data-spm-anchor-id="a313x.7781069.0.i11" class="">
                                                                </path>
                                                                <path d="M405.504 532.992c-22.528 0-40.448 18.432-40.448 40.448v202.24c0 18.432 12.8 34.304 29.696 38.912l-1.536 1.536h17.408v-0.512c19.968-2.56 35.328-19.456 35.328-39.936V573.44c0-22.016-17.92-40.448-40.448-40.448zM405.504 329.728c-22.528 0-40.448 18.432-40.448 40.448v88.064c0 18.432 12.8 34.304 29.696 38.912l-1.536 1.536h17.408v-0.512c19.968-2.56 35.328-19.456 35.328-39.936V370.176c0-22.016-17.92-40.448-40.448-40.448zM623.616 329.728l-17.408-0.512 1.536 1.536c-16.896 4.608-29.696 20.48-29.696 38.912v202.24c0 22.528 18.432 40.448 40.448 40.448s40.448-18.432 40.448-40.448V370.176c0-20.48-15.36-37.376-35.328-40.448zM623.616 647.168l-17.408-0.512 1.536 1.536c-16.896 4.608-29.696 20.48-29.696 38.912v88.064c0 22.528 18.432 40.448 40.448 40.448s40.448-18.432 40.448-40.448v-88.576c0-19.968-15.36-36.864-35.328-39.424z" fill="#d4237a" p-id="5905" data-spm-anchor-id="a313x.7781069.0.i12" class="selected">
                                                                </path>
                                                            </svg>
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                    <!-- 加载动画 开始 -->
                                    <div v-if="page_is_load" class="btn-group mb-2" style="float: right">
                                        <button class="btn btn-light" type="button" disabled="">
                                            <span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span>
                                            加载中...
                                        </button>
                                    </div>
                                    <!-- 加载动画 结束 -->
                                    
                                    <div v-else-if="!page_is_load && is_page_show" class="btn-group mt-2" style="float: right">
                                        <button type="button" class="btn btn-light" v-on:click="initData('',1)">首页</button>
                                        <button v-for="(item, index) in page_list" :key="index" v-on:click="initData('',item)" class="btn btn-light">{{item}}</button>
                                        <button type="button" class="btn btn-light" v-on:click="initData('',links_sort.sort.page)">末页</button>
                                        <div class="btn-group">
                                            <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">其他</button>
                                            <div class="dropdown-menu dropdown-menu-animated">
                                                <a class="dropdown-item" href="#" v-on:click="initData('',page-1)">上一页</a>
                                                <a class="dropdown-item" href="#" v-on:click="initData('',page+1)">下一页</a>
                                                <a class="dropdown-item" href="#">共 {{links_sort.sort.page}} 页</a>
                                                <a class="dropdown-item" href="#">共 {{links_sort.sort.count}} 条数据</a>
                                            </div>
                                        </div>
                                    </div>
                
                                </div>
                            </div>
                        </div>
                
                        <div class="col-xl-4">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title mb-3">{{title}}</h4>
                                    <div class="tab-content mb-0 b-0">
                                        <div class="tab-pane fade active show">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="form-group row mb-3">
                                                        <label class="col-md-3 col-form-label">名称</label>
                                                        <div class="col-md-9">
                                                            <input type="text" class="form-control" v-model="edit.name" onkeyup>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row mb-3">
                                                        <label class="col-md-3 col-form-label">描述</label>
                                                        <div class="col-md-9">
                                                            <input type="text" class="form-control" placeholder="这是一个默认的分类描述" v-model="edit.description" onkeyup>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="float-left">
                                            
                                        </div>
                                        <div class="float-right">
                                            <input type="button" class="btn btn-info button-next" v-on:click="btnSave(edit.id)" value="保存" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
                </div>
                <!-- 内容 - 结束 -->
                
            </div>
            
            <!-- 页脚 - 开始 -->
            <i-footer></i-footer>
            <!-- 页脚 - 结束 -->
        </div>
        
        <!-- 右侧边栏 - 开始 -->
        <i-right-side></i-right-side>
        <!-- 右侧边栏 - 结束 -->
    </div>
    
    <script src="<?= __ADMIN_JS__.'vue/manage-links-sort.js?v='.__VERSION__; ?>"></script>
    
    <!-- 依赖 - 开始 -->
    <? require(dirname(dirname(__FILE__)).'/public/script.html'); ?>
    <!-- 依赖 - 结束 -->
    
    <!-- APP JS - 开始 -->
    <!-- APP JS - 结束 -->
    
    <!-- footer - 开始 -->
    <? require(dirname(dirname(__FILE__)).'/public/footer.html'); ?>
    <!-- footer - 结束 -->